<template>
  <div class="ma-content-block justify-between p-4">
    <a-tabs
      type="rounded"
      v-model:active-key="active"
      @delete="openDeleteModal"
      @change="handleChange"
      :updateable="true"
      auto-switch
      :editable="true"
    >
      <template #extra>
        <a-space>
          <a-tooltip content="添加组">
            <a-button shape="round" @click="addGroupModal" type="primary" v-auth="['/core/config/save']">
              <template #icon><icon-plus /></template>
            </a-button>
          </a-tooltip>

          <a-tooltip content="管理该组配置">
            <a-button shape="round" @click="manageConfigModal" type="primary" v-auth="['/core/config/index']">
              <template #icon><icon-settings /></template>
            </a-button>
          </a-tooltip>
        </a-space>
      </template>
      <a-tab-pane
        v-for="(item, index) in configGroupData"
        :key="`${index}-${item.id}`"
        :title="item.name"
      >
        <ma-form
          v-model="formArray[item.id]"
          :columns="optionsArray[item.id]"
          @submit="submit"
          class="mt-3"
          ref="maFormRef"
        />
      </a-tab-pane>
    </a-tabs>

    <a-modal v-model:visible="deleteVisible" type="warning" :on-before-ok="deleteConfigGroup">
      <template #title>危险操作</template>
      <div class="mb-2">
        确定要删除 <span class="text-red-500 underline font-black">{{ deleteGroupData.name }}</span> 配置组吗？
      </div>
      <div>
        此操作会删除组和所属组配置项，如果执行请在下面输入框输入：<span class="text-red-500">{{ deleteGroupData.name }}</span>
      </div>
      <a-input :placeholder="`请输入 ${deleteGroupData.name}`" class="mt-2" v-model="name" />
    </a-modal>

    <add-group ref="addGroupRef" @success="addGroupSuccess" />
    
    <manage-config ref="manageConfigRef" @close="reloadPage" />
  </div>
</template>

<script setup>
  import { nextTick, ref } from 'vue'
  import config from '@/api/setting/config'
  import { Message } from '@arco-design/web-vue'
  import { auth } from '@/utils/common'
  import AddGroup from './components/addGroup.vue'
  import AddConfig from './components/addConfig.vue'
  import ManageConfig from './components/manageConfig.vue'

  const isCreateNode = ref(false)
  const active = ref('0-1')
  const name = ref('')
  const deleteGroupData = ref({ name: '' })
  const maFormRef = ref()
  const manageConfigRef = ref()
  const addGroupRef = ref()
  const formArray = ref([])
  const optionsArray = ref([])
  const configGroupData = ref([])
  const deleteVisible = ref(false)

  const openDeleteModal = (data) => {
    if (! auth('/core/config/destroy')) {
      Message.info('没有权限删除配置')
      return
    }
    const id = data.split('-')[1]
    if (id == 1 || id == 2) {
      Message.info('该配置为系统核心配置，无法删除')
      return
    }
    deleteGroupData.value = configGroupData.value.find(item => item.id == id)
    deleteVisible.value = true
  }

  const handleChange = (key) => {
    const params = key.split('-')
    maFormRef.value[params[0]].init()
    active.value = key
  }

  const reloadPage = () => {
    getConfigGroupList()
    active.value = '0-1'
  }

  const getConfigGroupList = async () => {
    isCreateNode.value = false
    const response = await config.getConfigGroupList()
    configGroupData.value = response.data
    configGroupData.value.map(async item => {
      formArray.value[item.id] = {}
      optionsArray.value[item.id] = []
      await getConfigData(item.id)
    })
    isCreateNode.value = true
  }

  const getConfigData = async (id) => {
    const params = {
      group_id: id,
      orderBy: 'sort',
      orderType: 'desc'
    }
    const response = await config.getConfigList(params)
    let form = {}
    optionsArray.value[id] = response.data.map(item => {
      let option = {
        title: item.name, dataIndex: item.key, formType: item.input_type,
        dict: {}, labelWidth: '120px', extra: item.remark, tooltip: item.key,
      }
      if (item.key === 'upload_mode') {
        option = {
          title: item.name,
          dataIndex: item.key,
          formType: item.input_type,
          dict: {},
          labelWidth: '120px',
          extra: item.remark,
          tooltip: item.key,
          onControl: (val) => {
            if (val == 1) {
              return {
                local_root: { display: true },
                local_domain: { display: true },
                local_uri: { display: true },
                oss_accessKeyId: { display: false },
                oss_accessKeySecret: { display: false },
                oss_bucket: { display: false },
                oss_dirname: { display: false },
                oss_domain: { display: false },
                oss_endpoint: { display: false },
                qiniu_accessKey: { display: false },
                qiniu_secretKey: { display: false },
                qiniu_bucket: { display: false },
                qiniu_dirname: { display: false },
                qiniu_domain: { display: false },
                cos_secretId: { display: false },
                cos_secretKey: { display: false },
                cos_bucket: { display: false },
                cos_dirname: { display: false },
                cos_domain: { display: false },
                cos_region: { display: false },
                
              }
            }
            if (val == 2) {
              return {
                local_root: { display: false },
                local_domain: { display: false },
                local_uri: { display: false },
                oss_accessKeyId: { display: true },
                oss_accessKeySecret: { display: true },
                oss_bucket: { display: true },
                oss_dirname: { display: true },
                oss_domain: { display: true },
                oss_endpoint: { display: true },
                qiniu_accessKey: { display: false },
                qiniu_secretKey: { display: false },
                qiniu_bucket: { display: false },
                qiniu_dirname: { display: false },
                qiniu_domain: { display: false },
                cos_secretId: { display: false },
                cos_secretKey: { display: false },
                cos_bucket: { display: false },
                cos_dirname: { display: false },
                cos_domain: { display: false },
                cos_region: { display: false },
              }
            }
            if (val == 3) {
              return {
                local_root: { display: false },
                local_domain: { display: false },
                local_uri: { display: false },
                oss_accessKeyId: { display: false },
                oss_accessKeySecret: { display: false },
                oss_bucket: { display: false },
                oss_dirname: { display: false },
                oss_domain: { display: false },
                oss_endpoint: { display: false },
                qiniu_accessKey: { display: true },
                qiniu_secretKey: { display: true },
                qiniu_bucket: { display: true },
                qiniu_dirname: { display: true },
                qiniu_domain: { display: true },
                cos_secretId: { display: false },
                cos_secretKey: { display: false },
                cos_bucket: { display: false },
                cos_dirname: { display: false },
                cos_domain: { display: false },
                cos_region: { display: false },
              }
            }
            if (val == 4) {
              return {
                local_root: { display: false },
                local_domain: { display: false },
                local_uri: { display: false },
                oss_accessKeyId: { display: false },
                oss_accessKeySecret: { display: false },
                oss_bucket: { display: false },
                oss_dirname: { display: false },
                oss_domain: { display: false },
                oss_endpoint: { display: false },
                qiniu_accessKey: { display: false },
                qiniu_secretKey: { display: false },
                qiniu_bucket: { display: false },
                qiniu_dirname: { display: false },
                qiniu_domain: { display: false },
                cos_secretId: { display: true },
                cos_secretKey: { display: true },
                cos_bucket: { display: true },
                cos_dirname: { display: true },
                cos_domain: { display: true },
                cos_region: { display: true },
              }
            }
          }
        }
      }
      const allowDictType = ['select', 'radio', 'checkbox']
      if (allowDictType.includes(item.input_type)) {
        option.dict = { data: item.config_select_data }
      }
      if (item.input_type === 'switch') {
        switch( typeof item.value ) {
          case 'string':
            option.checkedValue = 'true'
            option.uncheckedValue = 'false'
            break
          case 'number':
            option.checkedValue = 1
            option.uncheckedValue = 0
            break
        }
      }
      if (item.input_type === 'key-value') {
        item.value = JSON.parse(item.value)
      }
      if (/^\[/.test(item.value) && /\]$/.test(item.value) && item.input_type === 'checkbox') {
        item.value = JSON.parse(item.value)
      } else if (item.value && item.value.toString().indexOf(',') > -1 && item.input_type === 'checkbox') {
        item.value = item.value.split(',')
      }
      form[item.key] = item.value
      return option
    })
    formArray.value[id] = form
  }

  const manageConfigModal = () => {
    manageConfigRef.value.open(active.value.split('-')[1])
  }

  const addGroupModal = () => addGroupRef.value.open()
  const addGroupSuccess = (result) => {
    if (result) {
      Message.success('配置组保存成功')
      getConfigGroupList()
      return
    }
    Message.success('配置组保存失败')
  }

  const deleteConfigGroup = async (done) => {
    if (name.value !== deleteGroupData.value.name) {
      Message.error(`输入错误，验证失败`)
      done(false)
      return
    }

    const response = await config.deleteConfigGroup({ ids: deleteGroupData.value.id })
    if (response.code === 200) {
      Message.success('配置删除成功')
      deleteGroupData.value = {}
      getConfigGroupList()
      done(true)
    }
  }

  const submit = async (data) => {
    if (! auth('/core/config/update')) {
      Message.info('没有权限修改配置')
      return
    }
    const response = await config.updateByKeys(data)
    if (response.code === 200) {
      Message.success(response.message)
    }
  }

  getConfigGroupList()
  nextTick(() => maFormRef.value && maFormRef.value[0].init() )
</script>
<script>
export default { name: 'setting:config' }
</script>

<style scoped>

</style>
